<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
	textarea, 
pre {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
}
.expandingArea {
  position: relative;
  border: 1px solid #888;
  background: #fff;
}
.expandingArea textarea,
.expandingArea  pre {
  padding: 5px;
  background: transparent;
  font: 400 13px/16px helvetica, arial, sans-serif;
  /* Make the text soft-wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
}
.expandingArea  textarea {
  /* The border-box box model is used to allow
   * padding whilst still keeping the overall width
   * at exactly that of the containing element.
   */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  /* This height is used when JS is disabled */
  height: 100px;
}
.expandingArea.active  textarea {
  /* Hide any scrollbars */
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Remove WebKit user-resize widget */
  resize: none;/*resize 属性规定是否可由用户调整元素的尺寸。*/
}
.expandingArea  pre {
  display: none;
}
.expandingArea.active  pre {
  display: block;
  /* Hide the text; just using it for sizing */
  visibility: hidden;
}
	</style>
</head>
<body>
	<div class="expandingArea " id="textarea">
	  <pre><div class="span"></div><br></pre>
	  <textarea></textarea>
	</div>
	<div id="wo">
		
	</div>
	<button id="btn">提交</button>
<script type="text/javascript">
function makeExpandingArea(container) {
	var area = document.getElementsByTagName('textarea')[0] ;
	var span = document.getElementsByClassName('span')[0] ;
	if (area.addEventListener) {//标准下
		 area.addEventListener('input', function() {
		   span.textContent = area.value;
		 }, false);
		 span.textContent = area.value;
	}
	else if (area.attachEvent) {//ie下
		var support = "onpropertychange" in document.createElement("textarea") ? "onpropertychange" :
		document.onkeyup !== undefined ? "onkeyup" :
		"onfocus";
		 area.attachEvent(support, function() {
		    var html = area.value.replace(/\n/g,'<br/>');
		    span.innerText = html; 
		 });
		var html = area.value.replace(/\n/g,'<br/>');
		span.innerText = html;
	}
	container.className += "active";
}
var areas = document.getElementById('textarea') ;
makeExpandingArea(areas);
a={"wo":""}
$("#btn").click(function(){
	console.log($(".span").html())
	a.wo=$(".span").text();
	console.log(a.wo);
	$("#wo").text(a.wo)
})
</script>
</body>
</html>
